Näytön suunnan hallinta: Kattava opas laitteen kiertämisen käsittelyyn

Nykypäivän monien laitteiden maailmassa näytön suunnan sulava käsittely on ratkaisevan tärkeää positiivisen käyttökokemuksen tarjoamiseksi. Olipa kyseessä älypuhelin, tabletti tai jopa taitettava laite, käyttäjät odottavat sovellusten mukautuvan saumattomasti, kun he kääntävät laitettansa. Tämä opas tarjoaa kattavan yleiskatsauksen laitteen kiertämisen käsittelystä, kattaen eri alustat ja tekniikat varmistaaksesi, että sovelluksesi ovat responsiivisia ja käyttäjäystävällisiä.

Näytön suunnan ymmärtäminen

Näytön suunta viittaa suuntaan, jossa sisältö näytetään laitteen näytöllä. Kaksi pääasiallista suuntaa ovat:

• Pystysuunta (Portrait): Näyttö on korkeampi kuin se on leveä. Tämä on tyypillinen suunta älypuhelimille.
• Vaakasuunta (Landscape): Näyttö on leveämpi kuin se on korkea. Tätä suositaan usein videoita katsellessa tai pelejä pelatessa.

Jotkin laitteet ja sovellukset tukevat myös:

• Käänteinen pystysuunta: Pystysuunta, jossa laitetta on kierretty 180 astetta.
• Käänteinen vaakasuunta: Vaakasuunta, jossa laitetta on kierretty 180 astetta.

Miksi näytön suunnan muutoksia pitäisi käsitellä?

Näytön suunnan muutosten käsittelemättä jättäminen voi johtaa monenlaisiin ongelmiin, kuten:

• Asetteluongelmat: Elementit voivat olla väärin kohdistettuja, katkaistuja tai päällekkäin.
• Tietojen menetys: Joissakin tapauksissa aktiviteetin tai sovelluksen tila voi kadota, kun näyttöä kierretään.
• Huono käyttökokemus: Töksähtelevä tai rikkinäinen kokemus voi turhauttaa käyttäjiä ja vahingoittaa sovelluksesi mainetta.
• Suorituskykyongelmat: Toistuva uudelleenpiirtäminen ja asettelulaskelmat voivat vaikuttaa suorituskykyyn, erityisesti vanhemmilla laitteilla.

Näytön suunnan käsittely eri alustoilla

Erityiset tekniikat näytön suunnan käsittelyyn vaihtelevat kehitysalustan mukaan. Tarkastellaan joitakin suosituimpia alustoja:

1. Android

Android tarjoaa useita mekanismeja näytön suunnan muutosten käsittelyyn. Yleisimmät lähestymistavat ovat:

a. Konfiguraatiomuutokset

Oletusarvoisesti Android luo Activityn uudelleen, kun näytön suunta muuttuu. Tämä tarkoittaa, että `onCreate()`-metodi kutsutaan uudelleen ja koko asettelu ladataan uudestaan. Vaikka tämä voi olla hyödyllistä, kun käyttöliittymä halutaan rakentaa kokonaan uudelleen suunnan mukaan, se voi olla myös tehotonta, jos asettelua tarvitsee vain hieman säätää.

Estääksesi Activityn uudelleenluomisen, voit ilmoittaa `AndroidManifest.xml`-tiedostossa, että Activitysi käsittelee `orientation`-konfiguraatiomuutoksen:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Lisäämällä `orientation` ja `screenSize` (tärkeä API-tasolle 13 ja uudemmille), kerrot järjestelmälle, että Activitysi käsittelee suunnanmuutokset itse. Kun näyttöä kierretään, `onConfigurationChanged()`-metodi kutsutaan.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

`onConfigurationChanged()`-metodin sisällä voit päivittää käyttöliittymän uuden suunnan mukaisesti. Tämä lähestymistapa on tehokkaampi kuin Activityn uudelleenluominen, koska se välttää tarpeettoman resurssien lataamisen ja asettelun uudelleenrakentamisen.

b. Aktiviteetin tilan tallentaminen ja palauttaminen

Vaikka käsittelisit konfiguraatiomuutoksen itse, saatat silti joutua tallentamaan ja palauttamaan Activityn tilan. Esimerkiksi, jos Activityssäsi on tekstikenttä, haluat säilyttää tekstin, jonka käyttäjä on syöttänyt, kun näyttöä kierretään.

Voit käyttää `onSaveInstanceState()`-metodia Activityn tilan tallentamiseen ja `onRestoreInstanceState()`-metodia sen palauttamiseen.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Vaihtoehtoisesti voit käyttää ViewModels-komponentteja SavedStateHandlen kanssa käyttöliittymään liittyvien tietojen hallintaan ja säilyttämiseen konfiguraatiomuutosten yli, mikä on modernimpi ja suositeltavampi tapa.

c. Vaihtoehtoiset asettelut

Android antaa sinun tarjota erilaisia asettelutiedostoja eri näytön suunnille. Voit luoda erilliset asettelutiedostot `res/layout-land/`- ja `res/layout-port/`-hakemistoihin. Kun näyttöä kierretään, Android lataa automaattisesti sopivan asettelutiedoston.

Tämä lähestymistapa on hyödyllinen, kun käyttöliittymän on oltava merkittävästi erilainen vaaka- ja pystysuunnassa. Voit esimerkiksi haluta näyttää kahden ruudun asettelun vaakasuunnassa ja yhden ruudun asettelun pystysuunnassa.

d. ConstraintLayoutin käyttö

ConstraintLayout on tehokas asettelunhallitsija, jonka avulla voit luoda joustavia ja mukautuvia asetteluja. ConstraintLayoutin avulla voit määritellä rajoitteita, jotka määrittävät, miten näkymät sijoitetaan suhteessa toisiinsa ja vanhempaasetteluun. Tämä helpottaa sellaisten asettelujen luomista, jotka mukautuvat eri näyttökokoihin ja -suuntiin.

2. iOS

Myös iOS tarjoaa mekanismeja näytön suunnan muutosten käsittelyyn. Tässä on joitakin yleisiä lähestymistapoja:

a. Auto Layout

Auto Layout on rajoitepohjainen asettelujärjestelmä, jonka avulla voit määritellä sääntöjä näkymien sijoittelulle ja koolle. Auto Layout -rajoitteet varmistavat, että käyttöliittymäsi mukautuu eri näyttökokoihin ja -suuntiin.

Kun käytät Auto Layoutia, määrittelet tyypillisesti rajoitteita, jotka määrittävät näkymien välisiä suhteita. Voit esimerkiksi rajoittaa painikkeen keskelle vanhempänäkymäänsä sekä vaaka- että pystysuunnassa. Kun näyttöä kierretään, Auto Layout -moottori laskee automaattisesti näkymien sijainnit ja koot uudelleen täyttääkseen rajoitteet.

b. Kokoluokat (Size Classes)

Kokoluokat ovat tapa luokitella näyttökokoja ja -suuntia. iOS määrittelee kaksi kokoluokkaa: `Compact` ja `Regular`. Laitteella voi olla eri kokoluokat leveydelle ja korkeudelle. Esimerkiksi iPhonella pystysuunnassa on `Compact`-leveysluokka ja `Regular`-korkeusluokka. Vaakasuunnassa sillä on usein `Compact`-korkeus ja mallista riippuen `Compact`- tai `Regular`-leveys.

Voit käyttää kokoluokkia käyttöliittymäsi mukauttamiseen näytön koon ja suunnan perusteella. Voit esimerkiksi haluta näyttää eri joukon näkymiä tai käyttää eri fontteja eri kokoluokille.

Voit määrittää erilaisia rajoitteita ja jopa asentaa/poistaa näkymiä kokoluokkien perusteella suoraan Interface Builderissa tai ohjelmallisesti.

c. Näkymäkontrollerin kiertometodit

iOS tarjoaa UIViewController-luokassa useita metodeja, jotka kutsutaan laitetta kierrettäessä:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Kutsutaan ennen kuin näkymäkontrollerin näkymän kokoa muutetaan siirtymää varten.
• viewWillLayoutSubviews(): Kutsutaan juuri ennen kuin näkymäkontrollerin näkymä asettelee alinäkyvänsä.
• viewDidLayoutSubviews(): Kutsutaan juuri sen jälkeen, kun näkymäkontrollerin näkymä on asetellut alinäkyvänsä.

Voit ylikirjoittaa nämä metodit suorittaaksesi mukautettuja asettelun säätöjä, kun näyttöä kierretään.

d. Notification Center

Voit kuunnella suunnanmuutosilmoituksia käyttämällä Notification Centeriä:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Web-kehitys (HTML, CSS, JavaScript)

Web-kehityksessä voit käyttää CSS-mediakyselyitä ja JavaScriptiä näytön suunnan muutosten käsittelyyn.

a. CSS-mediakyselyt

Mediakyselyiden avulla voit soveltaa erilaisia tyylejä näytön koon, suunnan ja muiden ominaisuuksien perusteella. Voit käyttää `orientation`-mediaominaisuutta kohdistaaksesi tyylejä tiettyihin suuntiin.

/* Pystysuunta */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Vaakasuunta */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Voit käyttää mediakyselyitä asettelun, fonttien ja muiden tyylien säätämiseen suunnan perusteella.

b. JavaScript

Voit käyttää JavaScriptiä havaitsemaan näytön suunnan muutoksia ja suorittamaan mukautettuja toimintoja. `screen.orientation`-API tarjoaa tietoa nykyisestä suunnasta.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Vaihtoehtoisesti voit käyttää `matchMedia`-APIa mediakyselyiden kanssa:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScriptiä voidaan käyttää dynaamisesti säätämään asettelua, lataamaan eri resursseja tai suorittamaan muita toimintoja suunnan perusteella.

c. Responsiivisen suunnittelun kehykset

Kehykset, kuten Bootstrap, Foundation ja Materialize CSS, tarjoavat sisäänrakennetun tuen responsiiviselle suunnittelulle, mikä helpottaa sellaisten asettelujen luomista, jotka mukautuvat eri näyttökokoihin ja -suuntiin. Nämä kehykset käyttävät tyypillisesti ruudukkojärjestelmää ja mediakyselyitä luodakseen joustavia ja responsiivisia käyttöliittymiä.

Parhaat käytännöt näytön suunnan käsittelyyn

Tässä on joitakin parhaita käytäntöjä, jotka kannattaa pitää mielessä käsiteltäessä näytön suunnan muutoksia:

• Vältä tarpeetonta Activityn/ViewControllerin uudelleenluomista: Jos mahdollista, käsittele konfiguraatiomuutos itse välttääksesi Activityn tai ViewControllerin uudelleenluomisen aiheuttaman ylimääräisen työn.
• Tallenna ja palauta tila: Tallenna ja palauta aina Activityn/ViewControllerin tila tietojen menetyksen estämiseksi. Käytä ViewModels-komponentteja vankempaan tilanhallintaan.
• Käytä Auto Layoutia tai ConstraintLayoutia: Nämä asettelujärjestelmät helpottavat joustavien ja mukautuvien asettelujen luomista.
• Testaa useilla laitteilla: Testaa sovellustasi erilaisilla laitteilla, joilla on eri näyttökokoja ja -suuntia, varmistaaksesi sen moitteettoman toiminnan.
• Ota huomioon saavutettavuus: Varmista, että sovelluksesi pysyy saavutettavana vammaisille käyttäjille, kun näyttöä kierretään.
• Tarjoa selkeitä visuaalisia vihjeitä: Jos käyttöliittymä muuttuu merkittävästi näytön kiertämisen yhteydessä, tarjoa selkeitä visuaalisia vihjeitä auttaaksesi käyttäjiä ymmärtämään muutokset.
• Vältä tietyn suunnan pakottamista (ellei se ole välttämätöntä): Salli käyttäjien käyttää laitettaan haluamassaan suunnassa aina kun mahdollista. Suunnan pakottaminen voi olla turhauttavaa ja epämukavaa. Lukitse suunta vain, jos se on kriittistä sovelluksen toiminnallisuudelle (esim. peli, joka vaatii vaakasuuntaisen tilan). Jos lukitset suunnan, kommunikoi syy selkeästi käyttäjälle.
• Optimoi suorituskykyä varten: Minimoi näytön kiertämisen yhteydessä tehtävän työn määrä suorituskykyongelmien välttämiseksi.
• Käytä suhteellisia yksiköitä: Määritellessäsi kokoja ja sijainteja asettelussasi, käytä suhteellisia yksiköitä (esim. prosentit, `dp`, `sp`) absoluuttisten yksiköiden (esim. pikselit) sijaan varmistaaksesi, että käyttöliittymäsi skaalautuu oikein eri näyttökooilla.
• Hyödynnä olemassa olevia kirjastoja ja kehyksiä: Hyödynnä olemassa olevia kirjastoja ja kehyksiä, jotka tarjoavat tukea responsiiviselle suunnittelulle ja näytön suunnan käsittelylle.

Suunnan lukitseminen ja käyttökokemus

Vaikka yleensä on parasta antaa käyttäjien kääntää laitteitaan vapaasti, on tilanteita, joissa saatat haluta lukita näytön suunnan. Esimerkiksi koko näytön videosoitin saattaa lukita suunnan vaakasuuntaan optimaalisen katselukokemuksen saavuttamiseksi.

On kuitenkin tärkeää käyttää suunnan lukitsemista säästeliäästi ja antaa käyttäjälle selkeä syy. Suunnan pakottaminen voi olla turhauttavaa ja tehdä sovelluksestasi vähemmän saavutettavan.

Kuinka lukita näytön suunta

Android

Voit lukita näytön suunnan Androidissa asettamalla `screenOrientation`-attribuutin `AndroidManifest.xml`-tiedostossa:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Voit myös lukita suunnan ohjelmallisesti:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS:ssä voit määrittää tuetut suunnat `Info.plist`-tiedostossa. Voit myös ylikirjoittaa `supportedInterfaceOrientations`-metodin näkymäkontrollerissasi:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globaalit näkökohdat

Suunnitellessasi globaalille yleisölle, pidä seuraavat asiat mielessä näytön suunnan osalta:

• Oikealta vasemmalle (RTL) -asettelut: Harkitse, miten käyttöliittymäsi mukautuu RTL-kieliin. Jotkin kielet, kuten arabia ja heprea, kirjoitetaan oikealta vasemmalle. Varmista, että asettelusi peilautuu oikein RTL-tilassa. Auto Layout ja ConstraintLayout tarjoavat usein sisäänrakennetun tuen RTL-asetteluille.
• Kulttuuriset mieltymykset: Ole tietoinen laitteen käyttöön liittyvistä kulttuurisista mieltymyksistä. Vaikka useimmat käyttäjät ovat tottuneet sekä pysty- että vaakasuuntaisiin tiloihin, joillakin kulttuureilla voi olla hienovaraisia mieltymyksiä. Testaus eri alueilta tulevien käyttäjien kanssa voi antaa arvokkaita oivalluksia.
• Saavutettavuus moninaisille käyttäjille: Aseta saavutettavuus aina etusijalle. Varmista, että sovelluksesi on käytettävissä vammaisille ihmisille näytön suunnasta riippumatta. Tähän kuuluu vaihtoehtoisten tekstien tarjoaminen kuville, riittävän värikontrastin varmistaminen ja avustavien teknologioiden tukeminen.

Näytön suunnan käsittelyn testaaminen

Perusteellinen testaus on välttämätöntä sen varmistamiseksi, että sovelluksesi käsittelee näytön suunnan muutokset oikein. Tässä on joitakin vinkkejä testaukseen:

• Käytä emulaattoreita ja oikeita laitteita: Testaa sovellustasi sekä emulaattoreilla että oikeilla laitteilla kattaaksesi laajemman valikoiman näyttökokoja ja laitteistokokoonpanoja.
• Testaa eri suunnissa: Testaa sovellustasi sekä pysty- että vaakasuunnassa, sekä käänteisessä pysty- ja vaakasuunnassa, jos ne ovat tuettuja.
• Testaa eri näyttökooilla: Testaa sovellustasi eri näyttökokoisilla laitteilla varmistaaksesi, että käyttöliittymä skaalautuu oikein.
• Testaa eri fonttiko'oilla: Testaa sovellustasi eri fonttiko'oilla varmistaaksesi, että teksti pysyy luettavana.
• Testaa saavutettavuusominaisuudet päällä: Testaa sovellustasi saavutettavuusominaisuuksien, kuten näytönlukijoiden, ollessa käytössä varmistaaksesi, että se pysyy saavutettavana vammaisille käyttäjille.
• Automatisoitu testaus: Toteuta automatisoituja käyttöliittymätestejä, jotka kattavat näytön suunnan muutokset. Tämä voi auttaa havaitsemaan regressioita ja varmistamaan johdonmukaisen toiminnan julkaisujen välillä.

Yhteenveto

Näytön suunnan tehokas käsittely on kriittinen osa mobiili- ja web-kehitystä. Ymmärtämällä eri alustojen tarjoamat tekniikat ja noudattamalla parhaita käytäntöjä, voit luoda sovelluksia, jotka tarjoavat saumattoman ja nautinnollisen käyttökokemuksen riippumatta siitä, miten käyttäjä pitää laitettaan. Muista priorisoida testausta ja harkita suunnitteluvalintojesi globaaleja vaikutuksia varmistaaksesi, että sovelluksesi on saavutettava ja käyttäjäystävällinen moninaiselle yleisölle.